<script lang="ts">
  import {
    update_node_panel_setting,
    type NodePanelSetting,
  } from "$lib/api/board/board";
  import { Modal } from "@skeletonlabs/skeleton-svelte";
  import { drawStore } from "../store.svelte";
  import { X } from "lucide-svelte";
  import { get_user_session } from "$lib/api/user";
  import { request } from "$lib/utils/request";
  import { getContext } from "svelte";
  import type { Store as ToastStore } from "@zag-js/toast";

  const toast: ToastStore = getContext("toast");

  interface ModalProps {
    onClose: () => void;
  }
  let props: ModalProps = $props();

  let setting: NodePanelSetting = $state(
    drawStore.boardInfo == undefined
      ? {
          show_svg_node: false,
          show_image_node: false,
          show_link_node: false,
          show_develop: false,
        }
      : { ...drawStore.boardInfo.node_panel_setting },
  );

  async function updatePanelSetting() {
    const sessionId = await get_user_session();
    await request(
      update_node_panel_setting({
        session_id: sessionId,
        board_id: drawStore.boardInfo?.board_id ?? "",
        node_panel_setting: setting,
      }),
    );
    toast.create({
      title: "成功",
      description: "设置组件库成功！",
      type: "success",
    });
    props.onClose();
  }
</script>

<Modal
  open={true}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 shadow-xl shadow-surface-500 w-[500px]"
  backdropBase="backdrop-none"
  onOpenChange={(ev) => {
    if (!ev.open) {
      props.onClose();
    }
  }}
>
  {#snippet content()}
    <header class="flex justify-between">
      <h4 class="h4">设置组件库</h4>
      <button
        type="button"
        class="btn preset-ghost-primary-500"
        onclick={() => props.onClose()}
      >
        <X />
      </button>
    </header>

    <main class="flex flex-wrap gap-2">
      <label class="flex gap-2 bg-surface-300-700 pl-2 pr-2 p-1 items-center">
        <input
          type="checkbox"
          checked={setting.show_svg_node}
          onchange={(e) => (setting.show_svg_node = e.currentTarget.checked)}
        />
        <span>图标</span>
      </label>
      <label class="flex gap-2 bg-surface-300-700 pl-2 pr-2 p-1 items-center">
        <input
          type="checkbox"
          checked={setting.show_image_node}
          onchange={(e) => (setting.show_image_node = e.currentTarget.checked)}
        />
        <span>图片</span>
      </label>
      <label class="flex gap-2 bg-surface-300-700 pl-2 pr-2 p-1 items-center">
        <input
          type="checkbox"
          checked={setting.show_link_node}
          onchange={(e) => (setting.show_link_node = e.currentTarget.checked)}
        />
        <span>链接</span>
      </label>
      <label class="flex gap-2 bg-surface-300-700 pl-2 pr-2 p-1 items-center">
        <input
          type="checkbox"
          checked={setting.show_develop}
          onchange={(e) => (setting.show_develop = e.currentTarget.checked)}
        />
        <span>软件开发</span>
      </label>
    </main>

    <footer class="flex justify-end gap-4">
      <button
        type="button"
        class="btn preset-tonal"
        onclick={() => props.onClose()}>取消</button
      >
      <button
        type="button"
        class="btn preset-filled-primary-900-100"
        onclick={() => {
          updatePanelSetting();
        }}
      >
        设置
      </button>
    </footer>
  {/snippet}
</Modal>
